<template>
	<!-- 委外出检验页面 -->
	<div>
		<v-container row class="text-subtitle-1 d-flex justify-center  align-left">

			<v-btn class="ml-2 mt-7" small tile color="primary" @click="openPrintDialog">
				打印检验单
			</v-btn>

			<v-divider class="mx-4" inset vertical></v-divider>
			<v-row class="mt-2">
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="项目号" v-model="wOutQuery.projectCode" placeholder="项目号" dense outlined>
					</v-text-field>
				</v-col>
				<!-- sm="6" md="2" -->
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="项目名称" v-model="wOutQuery.projectName" placeholder="项目名称" dense outlined>
					</v-text-field>
				</v-col>
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="设备名称" v-model="wOutQuery.equipmentName" placeholder="设备名称" dense outlined>
					</v-text-field>
				</v-col>
				<v-col cols="12" sm="2" md="2">
					<v-text-field label="工单号" v-model="wOutQuery.childrenCode" placeholder="工单号" dense outlined>
					</v-text-field>
				</v-col>
				<!-- ml-n16 前面加n是间距 -->
				<!-- class="ml-n16 mx-auto" -->
				<v-col cols="12" sm="2" md="2">
					<v-btn depressed color="primary" @click="wOutQueryLoad">查询</v-btn>
					<v-btn class="ml-3" depressed color="primary" @click="refreshwOutQueryLoad">
						刷新</v-btn>
				</v-col>
			</v-row>
		</v-container>
		<br />
		<!-- :single-select="true" -->
		<v-data-table :headers="outsourcingHeaderList" :items="outsourcingDataList" small fixed-header item-key="id"
			dense class="text-no-wrap" loading-text="正在加载请稍等......" :options.sync="outsourcingOptions" show-select
			:footer-props="vuetifyDefaultPage" :loading="outsourcingLoading"
			:server-items-length="outsourcingTotalCount" show-expand single-expand
			@item-expanded="expandedOutsourcingItemEvent" @input="selectMuteOutSourcingEvent">
			<template v-slot:item.statusname="{ item }">
				<a v-if="item.status==99" style="color: #67C23A;">检验完成</a>
				<a v-else>未完成</a>
			</template>
			<template v-slot:item.actions="{ item }">
				<div>
					<v-btn class="ml-2" :disabled="item.status==99" small tile color="primary"
						@click="openOutsourcingDetailDialog(item)">
						录入检验信息
					</v-btn>
				<!-- 	<v-btn class="ml-2" small tile color="primary" @click="openLabelDialog(item)">
						列印标签
					</v-btn>
 -->
					<v-btn class="ml-2" small tile color="primary" @click="openExceptionDialog(item)">
						录入异常信息
					</v-btn>
				</div>
			</template>

			<template v-slot:expanded-item="{ headers, item }">
				<td :colspan="headers.length">
					<v-card>
						<v-card-title>
							<v-btn class="ml-2" :disabled="item.outsourcingDetailList.length<=0" small tile
								color="success" @click="printQADialog=true">
								打印委外检验报告单
							</v-btn>
						</v-card-title>
						<v-card-text>
							<v-data-table :headers="outsourcingdetailHeaderList" :items="item.outsourcingDetailList"
								small fixed-header item-key="id" hide-default-footer dense class="text-no-wrap">
								<template v-slot:item.sharpcornersburr="{ item }">

									<a v-if="item.sharpcornersburr==1" style="color: #67C23A;">有</a>
									<a v-else>无</a>

								</template>
							</v-data-table>
						</v-card-text>
					</v-card>
				</td>
			</template>
		</v-data-table>

		<!-- 检验对话框 -->
		<outendcheck :checkInfo="checkInfo" :callBackLoadProcessCards="wOutQueryLoad"></outendcheck>
		<!-- 异常信息对话框 -->
		<andonoperation :activeAndonDialogModel="activeAndonDialogModel"></andonoperation>

		<!-- 打印检验报告单对话框 -->
		<v-dialog v-if="printHeaderList.length>0" v-model="printQADialog" persistent max-width="1300px">
			<v-card>
				<v-card-title></v-card-title>
				<v-card-text>

					<div class="dayin">
						<div ref="print" id="printOutsource">
							<table class="tab">
								<tbody class="top-tbody">
									<tr class="tr-head" style="height:25px;border-bottom:1px solid #000;">
										<td style="font-weight:bold; text-align:center;" colspan="8">委外检验报告单</td>
									</tr>
									<tr style="height:25px;">
										<td style="width:95px;font-weight:bold">项目号</td>
										<td style="width:280px;text-align: center;">
											{{printHeaderList[0].projectcode}}
										</td>
										<td style="width:95px;font-weight:bold">项目名称</td>
										<td style="width:95px;font-weight:bold;text-align: center;">
											{{printHeaderList[0].projectname}}
										</td>
										<td style="width:95px;font-weight:bold">加工商</td>
										<td style="width:95px;font-weight:bold;text-align: center;">
											{{printHeaderList[0].suppliername}}
										</td>
										<td style="width:95px;font-weight:bold">日期</td>
										<td style="width:95px;font-weight:bold;text-align: center;">
											{{printHeaderList[0].checkdate|dateFormat}}
										</td>
									</tr>
								</tbody>
							</table>
							<table class="tab" style="border-top:none;">
								<tbody class="bottom-tbody">
									<tr class="tr-head" style="height:25px;border-bottom:1px solid #000;">
										<td style="font-weight:bold; text-align:center;" colspan="16">详细信息</td>
									</tr>

									<tr class="tr-head" style="height:25px;">
										<td class="td-bold td-center column-1">图号</td>
										<td class="td-bold td-center column-2">名称</td>
										<td class="td-bold td-center column-3">件数</td>
										<td class="td-bold td-center column-4">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">图标/实测</td>
										<td class="td-bold td-center column-5">尖角毛刺</td>
										<td class="td-bold td-center column-5">合格数</td>
										<td class="td-bold td-center column-5">返修数</td>
										<td class="td-bold td-center column-5">报废数</td>
										<td class="td-bold td-center column-5">备注</td>
									</tr>
									<tr v-for="detail in printAllOutDetailList" :key="detail.id" class="tr-body"
										style="height:25px;">
										<td class="td-body-color td-center column-1 column-body-1">
											{{detail.piccode}}
										</td>
										<td class="td-body-color td-center column-2 column-body-2">
											{{detail.name}}
										</td>
										<td class="td-body-color td-center column-3 column-body-3">
											{{detail.qty}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize1}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize2}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize3}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize4}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize5}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize6}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize7}}
										</td>
										<td class="td-body-color td-center column-4 column-body-4">
											{{detail.iconmeasuredsize8}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.sharpcornersburr==1?'有':'无'}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.okcount}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.backrepircount}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.wastecount}}
										</td>
										<td class="td-body-color td-center column-5 column-body-5">
											{{detail.description}}
										</td>
									</tr>
									</tr>
								</tbody>
							</table>
							<v-row class="mt-5">
								<v-col cols="3"></v-col>
								<v-col cols="3">加工方质检人:</v-col>
								<v-col cols="3"></v-col>
								<v-col cols="3">签收:</v-col>
							</v-row>
						</div>
					</div>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<div class="no-print">
						<v-btn color="primary" text @click="printContext">打印</v-btn>
						<v-btn color="primary" text @click="cannel">关闭</v-btn>
					</div>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
	import print from 'print-js'
	import andonoperation from '../components/andon/andon_add.vue'
	import outendcheck from '../components/outsourcecheck_endcheck/out_end_check.vue'
	import {
		mapActions
	} from 'vuex'
	export default {
		name: 'mes_qms_outsource_check',
		components: {
			andonoperation,
			outendcheck
		},
		data() {
			return {
				activeAndonDialogModel: {
					andonOperationDialog: false,
					childrenid: 0,
					controllerName: ''
				},
				//检验信息
				checkInfo: {
					checkDetailListDialog: false,
					childrencode: null,
					qaType: 0,
					controllerName: '',
					checkId:0
				},
				wOutQuery: {
					projectCode: '',
					projectName: '',
					equipmentName: '',
					childrenCode: ''
				},
				outsourcingHeaderList: [],
				outsourcingDataList: [],
				outsourcingdetailHeaderList: [],
				outsourcingOptions: { //页数
					page: 1,
					//每页行数
					itemsPerPage: 10
				},
				outsourcingLoading: true,
				outsourcingTotalCount: 0,
				vuetifyDefaultPage: {
					'items-per-page-text': '每页个数',
					'items-per-page-options': [10, 20, 50, 100]
					// 'items-per-page-all-text': '100'
				},
				//当前点击的委外信息
				currentClickOutsourcingModel: null,
				currentClickOutsourcingDetailModel: {},
				//录入委外明细对话框
				addOutsourcingDetailListDialog: false,
				qtyRule: [
					v => /^[0-9]*$/.test(v) || '请输入合法数字',
					v => v >= 0 || '需求量不能小于0'
				],
				printQADialog: false,
				printHeaderList: [],
				printAllOutDetailList: []
			}
		},
		created() {
			this.getOutSourceHeaderList()
		},
		watch: {
			outsourcingOptions: {
				handler() {
					this.wOutQueryLoad()
				},
				deep: true
			},
			tempAddress(newVal) {
				// 必须是这个update:address
				this.$emit('update:address', newVal)
			}
		},
		methods: {
			...mapActions('mes/andon_operation', [
				//获取物料信息
				'openAndonOperationDialog',
			]),
			async wOutQueryLoad() {
				this.outsourcingLoading = true
				var response = await this.$httpRequest({
					url: `MES/MESQaOutCheck/LoadPartCheckList?
					projectCode=${this.wOutQuery.projectCode}&
					projectName=${this.wOutQuery.projectName}&
					equipmentName=${this.wOutQuery.equipmentName}&
					childrenCode=${this.wOutQuery.childrenCode}&
					type=40&
					pageNumber=${this.outsourcingOptions.page}&
					pageSize=${this.outsourcingOptions.itemsPerPage}
					`,
					method: 'get',
				})
				if (response.status == 1) {
					// this.outsourcingHeaderList =
					// 	this.outsourcingHeaderList = [{
					// 			text: '操作',
					// 			value: 'actions',
					// 			align: 'center'
					// 		},
					// 		...response.data.headers
					// 	]
					// this.outsourcingdetailHeaderList = response.data.childrenHeaders
					this.outsourcingDataList = response.data.data.result
					this.currentClickOutsourcingDetailModel = response.data.children
					this.outsourcingTotalCount = response.data.data.pagination.totalRecords
					this.outsourcingLoading = false
				}
			},
			refreshwOutQueryLoad() {
				this.wOutQuery = {
					projectCode: '',
					projectName: '',
					equipmentName: '',
					childrenCode: ''
				}
				this.wOutQueryLoad()

			},
			//选中多个
			selectMuteOutSourcingEvent(items) {
				this.printHeaderList = []
				this.printAllOutDetailList = []
				items.forEach(r => {
					this.printHeaderList.push(r)
					console.log(r.outsourcingDetailList)
					r.outsourcingDetailList.forEach(c => {
						this.printAllOutDetailList.push(c)
					})
				})

				// this.selectManyoutsourcingList = items
			},
			//选择单个委外单信息
			selectSingleOutsourcingEvent(item) {
				if (item.value) {
					this.currentClickOutsourcingModel = item.item
				} else {
					this.currentClickOutsourcingModel = null
				}
			},
			//展开委外单
			expandedOutsourcingItemEvent(item) {
				if (item.value) {
					this.currentClickOutsourcingModel = item.item
					console.log(this.currentClickOutsourcingModel)
					this.wOutQueryLoad()
				}
			},
			openOutsourcingDetailDialog(outSourcingModel) {

				this.checkInfo.checkDetailListDialog = true
				this.checkInfo.childrencode = outSourcingModel.childrencode
				this.checkInfo.qaType = 40
				this.checkInfo.controllerName = 'MESQaOutCheck'
				this.checkInfo.checkId=outSourcingModel.id
			},
			resferOutsourcingDetailModel() {
				this.currentClickOutsourcingDetailModel.qty = 0
				this.currentClickOutsourcingDetailModel.iconmeasuredsize1 = null
				this.currentClickOutsourcingDetailModel.iconmeasuredsize2 = null
				this.currentClickOutsourcingDetailModel.iconmeasuredsize3 = null
				this.currentClickOutsourcingDetailModel.iconmeasuredsize4 = null
				this.currentClickOutsourcingDetailModel.iconmeasuredsize5 = null
				this.currentClickOutsourcingDetailModel.iconmeasuredsize6 = null
				this.currentClickOutsourcingDetailModel.iconmeasuredsize7 = null
				this.currentClickOutsourcingDetailModel.iconmeasuredsize8 = null
				this.currentClickOutsourcingDetailModel.okcount = 0
				this.currentClickOutsourcingDetailModel.backrepircount = 0
				this.currentClickOutsourcingDetailModel.wastecount = 0
				this.currentClickOutsourcingDetailModel.sharpcornersburr = 0
				this.currentClickOutsourcingDetailModel.description = null
			},
			//删除委外信息
			deleteOutsourcing(item) {

			},
			//委外检验明细对话框提交
			async addOutsourcingDetailSubmit() {
				var detailList = []
				detailList.push(this.currentClickOutsourcingDetailModel)
				var response = await this.$httpRequest({
					url: `MES/MESQaOutCheck/AddPartCheckDetailList`,
					method: 'post',
					data: detailList
				})

				if (response.status == 1) {
					this.$message.success(response.info)
					this.resferOutsourcingDetailModel()
				} else {
					this.$message.error(response.info)
				}
			},
			cannel() {
				this.currentClickOutsourcingDetailModel = {}
				this.addOutsourcingDetailListDialog = false
				this.printQADialog = false
			},
			//打开录入错误信息对话框
			async openExceptionDialog(item) {
				this.activeAndonDialogModel.andonOperationDialog = true
				this.activeAndonDialogModel.childrenid = item.childrenorderid
				this.activeAndonDialogModel.controllerName = 'MESQaOutCheck'
			},
			//打开打印零件终检单对话框
			openPrintDialog() {
				if (this.printHeaderList.length > 0) {
					var projectCode = this.printHeaderList[0].projectcode;
					this.printHeaderList.forEach(r => {
						if (r.projectcode != projectCode) {
							this.$message.warn('只能选择相同的项目才能打印')
							return
						}
					})
				}
				this.printQADialog = true
			},

			//列印标签对话框 TODO
			openLabelDialog(item) {

			},
			printContext() {
				printJS({
					printable: 'printOutsource',
					type: 'html',
					targetStyles: ['*'],
					ignoreElements: ['no-print'],
				})
			},
			getOutSourceHeaderList() {
				this.outsourcingHeaderList = [{
						text: '操作',
						value: 'actions',
						align: 'center'
					},
					{
						text: '项目号',
						value: 'projectcode',
						align: 'center'
					},
					{
						text: '项目名称',
						value: 'projectname',
						align: 'center'
					},
					{
						text: '子工单号',
						value: 'childrencode',
						align: 'center'
					},
					{
						text: '工单类型',
						value: 'typename',
						align: 'center'
					},
					{
						text: '委外零件名称',
						value: 'woutname',
						align: 'center'
					},
					{
						text: '质检状态',
						value: 'statusname',
						align: 'center'
					},
					{
						text: '委外数量',
						value: 'woutqty',
						align: 'center'
					},
					{
						text: '检验日期',
						value: 'checkdate',
						align: 'center'
					},
					{
						text: '加工方质检人',
						value: 'checkusername',
						align: 'center'
					},
				]
				this.outsourcingdetailHeaderList = [{
						text: '图号',
						value: 'piccode',
						align: 'center'
					},
					{
						text: '名称',
						value: 'name',
						align: 'center'
					}, {
						text: '数量',
						value: 'qty',
						align: 'center'
					}, 
					{
						text: '尖角毛刺',
						value: 'sharpcornersburr',
						align: 'center'
					},
					{
						text: '合格数',
						value: 'okcount',
						align: 'center'
					},
					{
						text: '返修数',
						value: 'backrepircount',
						align: 'center'
					},
					{
						text: '废品数',
						value: 'wastecount',
						align: 'center'
					},
					{
						text: '图标/实测',
						value: 'iconmeasuredsize1',
						align: 'center'
					}, {
						text: '图标/实测',
						value: 'iconmeasuredsize2',
						align: 'center'
					},
					{
						text: '图标/实测',
						value: 'iconmeasuredsize3',
						align: 'center'
					}, {
						text: '图标/实测',
						value: 'iconmeasuredsize4',
						align: 'center'
					}, {
						text: '图标/实测',
						value: 'iconmeasuredsize5',
						align: 'center'
					}, {
						text: '图标/实测',
						value: 'iconmeasuredsize6',
						align: 'center'
					}, {
						text: '图标/实测',
						value: 'iconmeasuredsize7',
						align: 'center'
					}, {
						text: '图标/实测',
						value: 'iconmeasuredsize8',
						align: 'center'
					},
					
					{
						text: '备注',
						value: 'description',
						align: 'center'
					},
				]
			},
		},
	}
</script>

<style scoped>
	.main {
		background: #aaf5aa;
	}

	.dayin {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		@media print {
			text-align: center;
			width: 100%;
			margin: auto;
			page-break-after: always;
			margin-top: 20px;
			font-family: "微软雅黑";
		}



		#printOutsource {
			text-align: center;

			.content {}

			.btn {}
		}
	}


	.tab {
		table-layout: fixed;
		width: 1200px;
		border-left: 1px solid #000;
		border-top: 1px solid #000;
		padding: 0px;
		margin: 0px;
		border-spacing: 0px;

		.top-tbody {}

		.bottom-tbody {
			.column-1 {
				width: 50px;
			}

			.column-2 {
				width: 180px;
			}

			.column-3 {
				width: 160px;
			}

			.column-4 {
				width: 120px;
			}

			.column-5 {
				width: 150px;
			}

			.column-body-1 {}

			.column-body-2 {}

			.column-body-3 {}

			.column-body-4 {}

			.column-body-5 {}
		}

		.tr-head {
			height: 25px;
		}

		.tr-body {}

		.td-bold {
			font-weight: bold;
		}

		.td-center {
			text-align: center;
		}

		.td-left {
			text-align: left;
		}

		.td-body-color {
			color: black;
		}
	}

	.Result0 {}

	.Result1 {
		color: gray;
	}

	.tab td {
		overflow: hidden;
		text-overflow: ellipsis;
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
		padding: 0px;
		margin: 0px;
		border-spacing: 1px;
	}
</style>
